I created the Design System Metrics Collection as an inspiration for what exists and works for my clients. An updated version of this page is available here. 

Before you choose your metrics, you need to ask yourself:

• What impact do you want to achieve with your Design System? 
• What’s your goal (quarterly, yearly)? 
• What can save you money? 
• What can bring you money?
• How can you improve efficiency? 
• How can you improve the quality of your work? 
• What would help designers/developers speed up their work? 
• How can you ensure more consistency? 
• What are your existing business drivers?
• How many resources can you put into building a design system?

💥 But which metrics are the most valuable?

You must choose metrics that reflect your objectives and your business’s overall KPIs. Combine quantitative and qualitative data. 

Why quantitative data?

• Insights into adoption rate.
• Compare and track over time.
• Using evidence rather than decisions based on “gut feeling.”
• What’s working and what’s not.

Why qualitative data?

• Numbers alone are not a sign of quality or success.
• Some metrics lag heavily, so you need to get feedback from users (employees, stakeholders).

When you analyze all these data, you will better understand how well your design system (and other parts of the organization) is performing from different perspectives. 

🏎 Don’t try to buy a Ferrari if you don’t have money for the gas.

Make a plan according to your resources, and remember that no single set of metrics works for everyone.

✅ Focus on incremental improvements.

✅ Get clarity on what is essential for your business.

✅ Involve the whole organization.

Metrics Collection

Business

• Return on Investment (ROI) 
  Clearly tied to financial value.
• Company Scalability
  Calculate the difference between workflow before and after having the Design System. Measure how much faster, on average, you can build, test, and launch new products (and test product-market fit).
• Brand Consistency Improvement
  With a strong foundation (Design System), there will be less work to fix visual differences. With a strong foundation (Design System), there will be less work to fix visual differences.The goal is to Increase familiarity with product design and drive repeat usage.
• Brand Reputation Improvement
  People start to recognize your brand and learn how to use your products when you communicate with consistent visual language.

Code

• Code Coverage
  Percentage of React components covered by tests.
• Linting Issues
  A number of ESLint issues detected.
• Render Time
  Average render time for React components.
• Accessibility Violations
  A number of accessibility issues detected.

Quantitative

• Amount of Libraries/Library usage
  How many libraries do you have? How many of them are in use? Figma offers Library usage trends.
• The Total Number of Main Components Across Libraries
  Combine with the Number of variations/props. Keep in mind that with more components, complexity increases.
• Amount of Products Using Different Libraries
  Design systems are challenging to build and maintain without understanding how designers use them. Figma offers a lot of insights into components and library usage. This helps you measure design system adoption before the product development process. Check out Figma analytics here. 
• The Total Number Component is Used Across Products.
  This one is connected to the adoption rate. You want to reuse the component as many times as possible because you can start saving time.
• Usage Statistics
  Compare components usage in Figma, Github.
• Adoption rate
  What % of products use the design system? Compare by departments and teams. The more the design system it’s used, the more days are saved.
• Number of Component Detachments (Figma)
  If some components are often detached, some user flows/scenarios are missing. Think about improvements.
• Number of Snowflakes
  Do components exist just because the designer had time to do them? 🙂
• Average Task Completion Time
  The time employees spend on completing the task (for example designing a new component). Try to compare before/after the Design System. How much did the time improve?
• Average Time (from an idea) to Market
  The time employees spend on completing the user flow. Try to compare before/after the Design System. How much did the time improve?
  
• User Interface Design Consistency
  With a strong foundation (Design System), there is less work for fixing visual differences.
• UX Issues Backlog
  After having the Design System in place, there should be way less UX and Design debt.
• Accessibility Score
  Create an accessible design, so users of diverse abilities can navigate, understand, and use your UI successfully.
• Documentation Updates/Sync
  Update documentation regularly (as automated as possible); otherwise, a lot of info is lost.
• Documentation Visits
  Are your employees even reading your Documentation site?
• Team Efficiency Improvement
  Try to compare workflow before the design system and find out how much time it takes to complete the task/user-flow/app design now.
• Accessibility Score
  Create an accessible design, so users of diverse abilities can navigate, understand, and use your UI successfully.

Qualitative

• User Interviews with Employees, Stakeholders
  Find out how employees work right now. How do they communicate? Where do they find out about design updates? Who would use the Design System? Why and how would the Design System help them? Do this kind of interview again once you have the Design System in place.
• Team Efficiency and Productivity Improvement Survey
  Don’t just compare numbers; send a survey. Do employees have more time for focused work, thinking about flows, etc.?
• Tech Debt
  After having the Design System in place, there should be less tech debt.
• Design Debt
  After having the Design System in place, there should be way less UX and Design debt.

Adoption

• Satisfaction Survey
  Check reviews from different teams. How positive are they? What are they missing?
• Contributions to the Design System
  Design System gets more valuable with a collaborative team.
• Participation in Meetings
• Adoption rate
  What % of products use the design system? Compare by departments and teams.
• Amount of Products Using Different Libraries
  This one is important. Imagine having a Design System in place, but no one would use it. This KPI shows how many products use the coded components (or libraries in Figma). You want to achieve the highest possible %.

Treat your design system as a product.
It’s a marathon, not a sprint 🌈

If you enjoyed this article and want more design, strategy, and business tips, subscribe to my newsletter below, and I’ll deliver them straight into your inbox.

I am a Design Strategist who holds a Master of Business Administration. I have 15+ years of career experience in design work and consulting across tech startups and several marquee tech unicorns such as Stellar.org, Outfit7, Databox, Xamarin, Chipolo, NIVEA, Zemanta, etc. I currently advise, coach, and consult with companies on design strategy and design systems. I received numerous awards for my designs, but I’m much happier when I prove that the right design decisions increase your ROI. 🔥

My personal page  *  Let’s connect on Linkedin  *  Twitter

The Ultimate Design Systems Resources List

Pro tips: How to create your design system

Comments

comments